<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>登陆界面</title>
		<link rel="stylesheet" href="../css/login.css">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<link rel="shortcut icon" href="../img/title/招聘求职.png" type="image/x-icon">
		<style>
			body {
				background-image: url('../img/login/32a06bb67d0ac533106461f97fb0dce6.jpg');
				background-size: 100%;
				background-repeat: no-repeat;
				align-items: center;
				justify-content: center;
				display: flex;
			}
		</style>
	</head>
	<body>
		<div class="sign">
			<img src="../img/login/云谷面试官.png"/>
			<a href="../index.html">&nbsp;校园兼职系统</a>
		</div>
		<div class="sign_2">
			<img src="../img/login/公告-通知-07.png"/>
			&nbsp;客户服务热线:123 456 7890
		</div>
		<!-- <div id="app"> -->
		<div class="main">
			<div class="main_left">
				<div class="main_left_top box">
					<div class="left_img">
						<img src="../img/login/客户管理.png" />
					</div>
					<div class="right_text">
						<dl>
							<dt>找兼职</dt>
							<dd>一步到位！</dd>
						</dl>
					</div>
				</div>
				<div class="main_left_center box">
					<div class="left_img">
						<img src="../img/login/物业咨询备份.png" />
					</div>
					<div class="right_text">
						<dl>
							<dt>沟通</dt>
							<dd>在线即时沟通！</dd>
						</dl>
					</div>
				</div>
				<div class="main_left_botton box">
					<div class="left_img">
						<img src="../img/login/项目管理备份.png" />
					</div>
					<div class="right_text">
						<dl>
							<dt>找兼职</dt>
							<dd>兼职任你选！</dd>
						</dl>
					</div>
				</div>
			</div>
			<div id="app">
				<div class="main_right_header">
					<div class="login_header">
						<h1>登录</h1>
					</div>
				</div>
				<div class="main_right_content">
					<input class="inputCss" v-model="user.username" type="text" placeholder="请输入账号" maxlength="8" minlength="2" title="最短支持2位,最长支持8位哦"/>
					<input class="inputCss" v-model="user.password" type="password" placeholder="请输入密码" maxlength="12" minlength="4" title="最短支持4位,最长支持12位哦"/>
					<input class="inputCode" v-model="code" type="text" placeholder="验证码" maxlength="4" />
					<img id="code" src="http://localhost/logins/captcha" @click="refresh()" title="看不清?点一下" alt="哦吼 好像出错了"/>
				</div>
				<div class="main_right_footer">
					<div class="login_btn">
						<el-row>
						  <el-button class="btn" type="success" @click="verification()">用户登录</el-button>
						  <el-button class="btn" type="warning" @click="jump()">新用户注册</el-button>
						</el-row>
					</div>
					<div class="main_right_footer_anthor">
						<el-link @click="jumpReset()" type="info">忘记密码？</el-link>
					</div>
				</div>
			</div>
		</div>
		<!-- </div> -->

	</body>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="../js/jquery-3.6.1.js"></script>
	<script src="../js/login.js"></script>
	<script src="../js/axios-0.18.0.js"></script>
	<script src="../js/after_landing.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				code: '',
				user:{
					username: '',
					password: ''
				},
				yzcode: '',
				lastUrl: '',
			},
			created() {
				let url = document.referrer
				console.log(url)
				if (url === ''){
					this.lastUrl = 'main.html'
				} else if (url === 'http://localhost/pages/register.html' || url === 'http://localhost/pages/resetPassword.html'){
					this.lastUrl = 'main.html'
				} else {
					this.lastUrl = url;
				}
				this.getCode();
			},
			methods: {
				verification(){
					var _this = this;
					var user = _this.user;
					if(user.username.length ===0 || user.password.length ===0 || _this.code.length ===0 ){
						_this.$message.error('账号，密码，验证码都为必填项哦');
					}else if(user.username.length < 2){
						_this.$message.error('账号最短为2位哦')
					}else if(user.password.length < 4){
						_this.$message.error('密码最短为4位哦')
					}else if(_this.code !== _this.yzcode){
						_this.$message.error('验证码错误哦')
						_this.refresh();
					}else {
						_this.login();
					}
				},
				jump(){
					document.location.href = "register.html";
				},
				refresh() {
					this.getImgCode();
					setTimeout(()=>{
						this.getCode();
					},500)
				},
				getImgCode(){
					document.getElementById("code").src = "/logins/captcha?time" + new Date().getTime();
				},
				getCode(){
					this.code = ''
					axios.get("/logins/getCode").then((resp)=>{
						this.yzcode = resp.data.data
					})
				},
				login(){
					var user = this.user
					//判断用户是否存在
					axios.post("/logins/detectionExistUser",user).then((resp)=>{
						if(resp.data.data){
							//判断密码是否正确
							axios.post("/logins/checkUserPassword",user).then((res)=>{
								if (res.data.data){
									this.$message.success('欢迎回来 '+user.username)
									//跳转页面
									setTimeout(()=>{
										document.location.href = this.lastUrl
									},1000)
								}else {
									this.$message.error(res.data.msg)
									user.password = ''
									this.refresh();
								}
							})
						}else{
							this.$message.error('用户不存在')
							this.user.username = ''
							this.user.password = ''
							this.refresh();
						}
					})
				},
				jumpReset(){
					document.location.href = "resetPassword.html";
				}
			}
		})
	</script>

</html>
